<template>
	<div class="login-sms" v-loading="loading">
		<el-form size="medium">
			<el-form-item>
				<el-input
					v-model="form.phone"
					placeholder="请输入手机号"
					maxlength="11"
					clearable
				></el-input>
			</el-form-item>

			<el-form-item class="captcha">
				<el-input
					placeholder="请输入短信验证码"
					v-model="form.code"
					maxlength="4"
					@keydown.enter.native="next"
					clearable
				></el-input>

				<el-button @click="getCaptcha" :disabled="captcha.btnLock">{{
					typeof captcha.state === 'number' ? captcha.state + 's' : captcha.state
				}}</el-button>
			</el-form-item>

			<el-form-item>
				<el-input
					type="password"
					placeholder="请输入新密码"
					v-model="form.password"
					maxlength="20"
					auto-complete="new-password"
					clearable
					show-password
				></el-input>
			</el-form-item>

			<el-button class="submit-btn" @click="next">重置密码</el-button>

			<captcha ref="captcha" @callback="captchaCountDown"></captcha>
		</el-form>
	</div>
</template>

<script>
import Captcha from '@/components/captcha';
import { mapMutations } from 'vuex';
export default {
	name: 'forget',
	components: {
		Captcha
	},
	data() {
		return {
			form: {},
			captcha: {
				interval: null,
				btnLock: false,
				state: '获取验证码'
			},
			loading: false
		};
	},
	created() {},
	methods: {
		...mapMutations(['SET_TOKEN']),

		// 获取短信验证码
		getCaptcha() {
			if (/^(?:(?:\+|00)86)?1\d{10}$/.test(this.form.phone)) {
				this.$refs['captcha'].open(this.form.phone);
			} else {
				this.$message.warning('请输入正确的手机号');
			}
		},

		next() {
			const { phone, password, code } = this.form;
			const { captchaId } = this.$refs['captcha'].form;

			if (!phone) {
				return this.$message.warning('手机号不能为空');
			}

			if (!code) {
				return this.$message.warning('短信验证码不能为空');
			}

			if (!captchaId) {
				return this.$message.warning('请选获取短信验证码');
			}

			if (!password) {
				return this.$message.warning('密码不能为空');
			} else {
				if (password.length < 6) {
					return this.$message.warning('密码不能低于6位');
				} else {
					let reg = /^[a-zA-Z0-9]/;
					if (!reg.test(password)) {
						return this.$message.warning('密码需包含数字或字母且不能以特殊字符开头');
					}
				}
			}
			this.loading = true;

			this.$service.common
				.forget({
					phone,
					password,
					code
				})
				.then(() => {
					this.$message('重置成功');
					this.$parent.registerNext();
				})
				.catch(err => {
					this.$message.error(err);
				})
				.done(() => {
					this.loading = false;
				});
		},
		captchaCountDown() {
			// 验证码倒计时
			this.captcha.state = 60;
			this.captcha.btnLock = true;

			this.captcha.interval = setInterval(() => {
				this.captcha.state--;
				if (this.captcha.state === 0) {
					clearInterval(this.captcha.interval);
					this.captcha.state = '重新发送';
					this.captcha.btnLock = false;
				}
			}, 1000);
		}
	}
};
</script>

<style lang="stylus" scoped>
.login-sms {
    >>>.el-form {
        width 80%
        margin 0 auto
		.el-input{
			margin-bottom 10px
			.el-input__inner {
				margin-top 0
				border: 0;
				border-bottom: 1px solid #8A8A96;
				border-radius: 0;
				font-size 14px

				&::-webkit-input-placeholder {
					color: #8A8A96;
				}

				&::-moz-placeholder {
					color: #8A8A96;
				}

				&::-moz-placeholder {
					color: #8A8A96;
				}

				&::-ms-input-placeholder {
					color: #8A8A96;
				}

				&:active, &:focus {
					border-color #000
				}
			}
		}
        .captcha {
            position relative
            .el-button {
                color: $main-color;
				border-color $main-color;
				border-radius: 50px;
                position absolute
                top 0px
				padding: 6px 16px;
                right 0

                &.is-disabled {
                    color: #999;
                    border: 1px solid #999;
                }
            }

        }
		.submit-btn {
			width: 100%;
			font-size: 15px;
			border: none;
			background: linear-gradient(to top left, $main-color, $linear-color);
			color $color-white
			letter-spacing: 2px;
			cursor: pointer;
			margin-top: 20px;
			border-radius: 50px;
			transition .3s
			&:hover {
				opacity .8
			}
		}
    }
}
</style>
